<template>
	<view
		class="page-wrap"
		:class="detail.id ? 'bg-fff' : ''"
		:data-theme="theme" :class="theme"
		:style="globalColor.style"
	>
		<view :data-theme="theme" :class="theme" :style="globalColor.style">
			<HeadCustom :isCircle="true"
				:isSpace="false"
				:isAppBtn="!isApp"
				:isHome="!isApp"
			>
				<!-- <view slot="right" v-if="isApp && !preview" class="font30 lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn" @click="isAction = true"><text class="bwfont bw-dian"></text></view> -->
				<view
					slot="right"
					v-if="isApp && !preview && !isNot"
					class="lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn"
					@click="transmit"
				>
					<text class="bwfont bw-zhuanfa font30"></text>
				</view>
			</HeadCustom>
		</view>
		<view v-if="isHead" :style="{ height: statusBarHeight + 'px' }"></view>
		<view v-if="isHead" style="height: 88rpx"></view>
		<HeadMore :show.sync="isAction" :list="actionList" @action="actionTap" />
		<!-- 产品展示先隐藏，暂未解决热文短链App中打开名片详情 -->
		<view class="userInfo fboxRow" v-if="detail.quoteMemberVO" @click="goApp">
			<image class="avatar" :src="detail.quoteMemberVO.imagePhoto" mode="aspectFill"></image>
			<view class="line"></view>
			<view class="fboxCol detail_msg">
				<view class="name font32 flex1">{{ detail.quoteMemberVO.realName }}</view>
				<view class="flex1 font28 user_msg mt24" v-if="detail.quoteMemberVO.companyName">
					<text class="bw-Vector8 bwfont icon_txt"></text>
					{{ detail.quoteMemberVO.companyName }}
				</view>
				<view class="flex1 font28 user_msg mt10" v-if="detail.quoteMemberVO.positionName">
					<text class="bw-a-zu3478 bwfont icon_txt"></text>
					{{ detail.quoteMemberVO.positionName }}
				</view>
			</view>
			<text class="bq-tjr fboxRow Ycenter Xcenter font28">推荐人</text>
		</view>
		<view class="article hotAricle bui-article" v-if="detail.id">
			<view class="title font38">{{ detail.title }}</view>
			<view class="info fboxRow font24">
				<text class="txt_msg">{{ detail.editTime.substring(0, 16) }}</text>
				<text v-if="detail.author" class="txt_msg">{{ detail.author }}</text>
				<text v-if="detail.articleSource" class="txt_msg">{{ detail.articleSource }}</text>
				<text class="original" @tap="original">阅读原文</text>
			</view>
			<!-- <view class="line_box"></view> -->

			<view class="detail rich_media_content">
				<view class="font32 content" v-html="detail.content"></view>
				<!-- <rich-text class="font32 content" :nodes="detail.content" @itemclick="goImgDetials">
				</rich-text> -->

				<view class="reminder font28">
					以上文章内容，不代表本无名片平台观点，内容授权、投诉请联系 benwu@benwunet.com
				</view>
			</view>
			<!-- <view class="line_box"></view> -->
			<view class="viewYy fboxRow Ycenter font28" v-if="!preview">
				<view class="flex1 fboxRow Ycenter">
					<!-- <template>
						<text>引用</text>
						<view class="yyUser flex1 fboxRow Ycenter" @click="goPage">
							<image class="img_box" :src="item.imagePhoto"
								v-for="(item, index) in detail.memberList"
								:key="index" :style="{transform: `translateX(-${index * 20 }rpx)`}" mode="aspectFill"></image>
							<view class="img_more fboxRow Ycenter Xcenter" :style="{transform: `translateX(-${detail.memberList && detail.memberList.length * 20 }rpx)`}"><u-icon name="more-dot-fill" color="#A7ABB5"></u-icon></view>
						</view>
					</template> -->
				</view>
				<view class="">阅读{{ detail.eye || 0 }}次</view>
			</view>
			<!-- <view class="hotRec"></view>
			<view class="hotRecommended font32">
				<view class="recommendedTitle">
					<view style="margin-bottom: 20rpx;">热文推荐</view>
					<view class="recommendedDetail font32 font-ell1" v-for="(item, index) in recommendedList" :key="index" @tap="$pageTo('/hotArticle/detail?id='+item.id)">{{ index + 1 }}.{{ item.title }}</view>
				</view>
			</view> -->
			<template v-if="preview">
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
					<view class="btn_box fboxRow">
						<view class="flex1 font32" @tap="back">返回</view>
					</view>
				</u-tabbar>
			</template>
			<!-- <template v-if="!isApp">
				<template v-if="(pageType == 0 || userInfo.memberId != (detail.quoteMemberVO && detail.quoteMemberVO.cardId))&&pageType != 2">
					<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
						<view class="btn_box fboxRow"><view class="flex1 font32" @tap="goQuote">我要引用</view></view>
					</u-tabbar>
				</template>
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" v-if="pageType == 2 || (detail.quoteMemberVO && detail.quoteMemberVO.cardId)">
					<view class="btn_box fboxRow"><view class="flex1 font32" @tap="transmit"><text class="bwfont bw-zhuan"></text>转发</view></view>
				</u-tabbar>
			</template> -->
		</view>
		<view v-if="isNot"><not-empty :height="500" text="文章不存在或已被删除"></not-empty></view>
		<not-login ref="notLogin" />
		<!-- #ifdef H5 -->
		<FixedBtn backColor="transparent" v-if="!isApp && isHead">
			<template>
				<view class="btm-btn fboxRow Xcenter">
					<view class="btn-txt" @click="openApp">在APP中打开</view>
				</view>
			</template>
		</FixedBtn>
		<!-- #endif -->
	</view>
</template>

<script>
import ArticleItem from './components/article-item.vue';
import HeadMore from '@/components/head-custom/head-more.vue';
import { hotTextDetail, hotList, hotQuoteDetail, hotQuote } from '@/api/h5';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest, openAppULink } from '@/static/js/common.js';
// #ifdef H5
import {wxSdk} from '@/static/js/wxjsdk.js';
// #endif
import { getAndroidVersion } from '@/api/index';
import FixedBtn from '@/components/bottom-btn/fixed.vue';
export default {
	components: { ArticleItem, HeadMore, FixedBtn },
	name: 'aricleDetail',
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isAction: false,
			actionList: [{ label: '转发', value: 1, icon: 'bw-zhuanfa' }], //,{ label: '我引用的文章', value: 3,  icon: 'bw-lianjie' } { label: '收藏', value: 2 },
			detail: {},
			isApp: true,
			id: '', // '439712969060777984'
			memberId: '',
			pageType: 0, // 0 平台热文，1别人查看个人引用热文, 2个人引用热文
			preview: 0,
			recommendedList: [],
			userInfo: {},
			statusBarHeight: 0,
			shareDataId: '',
			isHead: true,
			isNot: false,
			updateAddress: ''
		};
	},
	onLoad(option) {
		uni.setNavigationBarTitle({ title: '本无热文' });
		let token = {};
		if (option && option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			this.benwu = option.benwu;
			token = {
				// access_token: getRequest(benwu,'token'),
				// id: getRequest(benwu,'id'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
				// authStatus: getRequest(benwu,'authStatus'),
			};
			if (getRequest(benwu, 'token')) {
				token.access_token = getRequest(benwu, 'token');
			}
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			// this.id = token.id
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if (option && option.isApp) {
			this.isApp = option.isApp == 1 ? true : false;
		} else {
			const { bw_link } = getApp().getBWData(['bw_link']);
			this.isApp = bw_link.isApp == 1 ? true : false;
			this.getisApp();
		}
		if (option.pageType) {
			this.pageType = option.pageType;
		}
		if (option.preview) {
			this.preview = option.preview;
		}
		if (option.isHead) {
			this.isHead = false;
		}
		if (option.id) {
			if (option.id == 'hotArticleTemp') {
				this.detail = getApp().globalData.hotArticleTemp;
			} else {
				this.id = option.id;
				this.getDetail();
			}
		}
		// this.getRec()
		const { bw_user_temp, bw_params } = getApp().getBWData(['bw_user_temp', 'bw_params']);
		this.userInfo = bw_user_temp;
		this.statusBarHeight = bw_params.statusBarHeight;
		// #ifdef H5
		this.getHandler();
		// #endif
	},
	mounted() {
		// #ifdef H5
		window.appCallback = this.appCallback;
		// #endif
	},
	methods: {
		// 获取下载地址
		getisApp() {
			getAndroidVersion().then((res) => {
				this.updateAddress = res.data.updateAddress;
			});
		},
		// 打开app
		openApp() {
			const { bw_link, bw_user_temp } = getApp().getBWData(['bw_link', 'bw_user_temp']);
			const href = window.location.href;
			const obj = {
				sharerId: bw_link.sharerId,
				href: href,
				id: this.id
			};
			openAppULink('usr117fpuh5nd9ci', obj, this.updateAddress);
		},
		// 安卓
		appCallback(res) {
			console.log('appCallJS=========appCallback', res)
			this.isApp = true
			const { bw_link } = getApp().getBWData(['bw_link']);
			bw_link.isApp = res.isApp;
			uni.setStorageSync('bw_link', JSON.stringify(bw_link));
		},
		// ios
		getHandler() {
			const data = { type: 'appCallJS' };
			this.$bridge.callHandler('recruitHandler', data, (res) => {
				console.log('appCallJS=========', res)
				this.isApp = true
				const { bw_link } = getApp().getBWData(['bw_link']);
				bw_link.isApp = res.isApp;
				uni.setStorageSync('bw_link', JSON.stringify(bw_link));
			});
		},
		original() {
			const { bw_link } = getApp().getBWData(['bw_link']);
			if (bw_link.isApp != 1) {
				window.location.href = this.detail.url;
			} else {
				const data = {
					type: 'hotArticleDetail',
					url: this.detail.url
				};
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			}
		},
		goImgDetials(e) {
			console.log(e);
		},
		back() {
			uni.navigateBack();
		},
		// 跳转我要引用
		goQuote() {
			const { bw_params } = getApp().getBWData(['bw_params']);
			if (bw_params.access_token) {
				this.$pageTo(
					'/hotArticle/quote?id=' + this.detail.id + '&pageType=' + this.pageType
				);
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			}
		},
		// 跳转APP名片详情，跟app做交互
		goApp() {
			const { bw_link } = getApp().getBWData(['bw_link']);
			console.log('goApp跳转APP名片详情', bw_link)
			// if (bw_link.isApp != 1) {
			if (this.isApp) {
				const data = {
					type: 'card',
					memberId: this.detail.quoteMemberVO.cardId
				};
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				this.$pageTo('/CardDetail', { id: this.detail.quoteMemberVO.cardId });
			}
		},
		// 热文引用相关用户
		goPage() {
			const { bw_params } = getApp().getBWData(['bw_params']);
			if (bw_params.access_token) {
				this.$pageTo(`/hotArticle/userCount?id=${this.id}`);
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			}
		},
		// 获取热文详情
		getDetail() {
			hotTextDetail({ id: this.id, type: this.pageType == 0 ? 0 : 1 })
				.then((res) => {
					res.data.content = res.data.content.replace('677px', '100%');
					this.detail = res.data;
					uni.setNavigationBarTitle({
						title: res.data.title
					});
					// #ifdef H5
					this.appShareData(this.id, 'meta', res.data.type);
					// #endif
				})
				.catch((err) => {
					console.log('catch', err);
					// uni.showToast({
					// 	title: JSON.stringify(err),
					// 	icon: 'none'
					// })
					this.isNot = true;
				});
		},
		// app交互传参
		appShareData(id, type, pageType) {
			const { content, title, img, quoteMemberVO, eye } = this.detail;
			let con = content.replace(/<\/?.+?>/g, '');
			const regex = /(<([^>]+)>)/gi;
			con = con.replace(/[\r\n]/g, ''); // 去除换行和tab
			con = con.replace(regex, ''); // 去除Html标签
			const href = `${location.origin}${location.pathname}#/hotArticle/detail?id=${id}&pageType=${pageType}`;
			const data = {
				type: type, // shareHotArticle || meta
				link: href,
				originalUrl: window.location.href,
				title: title,
				imgUrl: img,
				desc: con.substr(0, 50) || href,
				browseCount: eye
			};
			if (this.detail.type == 1 && quoteMemberVO) {
				const { realName, imagePhoto, cardId } = quoteMemberVO;
				data.realName = realName;
				data.avatar = imagePhoto;
				data.memberId = cardId;
			}
			this.$bridge.callHandler('appHandler', data, () => {
				console.log('appHandler', '返回');
			});
			if (type == 'meta') {
				this.$nextTick(() => {
					wxSdk.setShareData(data, {});
				});
			}
		},
		// 获取推荐列表
		getRec() {
			hotList({ cid: 0, current: 1, size: 5 }).then((res) => {
				this.recommendedList = res.data.list;
			});
		},
		// 热文头部操作 我引用的，转发
		actionTap(e) {
			if (e.item.value == 3) {
				this.$pageTo(`/hotArticle/hotMine`);
			} else if (e.item.value == 1) {
				this.transmit();
			}
		},
		// 转发内容
		transmit() {
			this.appShareData(this.detail.id, 'shareHotArticle', this.detail.type);
			// 全部由APP调接口做转发分享
			// 转发时自动引用文章，多次转发只执行一次
			// const { bw_user_temp, bw_params } = getApp().getBWData(['bw_user_temp', 'bw_params']);
			// if (
			// 	!bw_params.access_token ||
			// 	(this.detail.type == 1 &&
			// 		bw_user_temp &&
			// 		bw_user_temp.memberId == this.detail.quoteMemberVO.cardId)
			// ) {
			// 	this.appShareData(this.detail.id, 'shareHotArticle', this.detail.type);
			// } else {
			// 	// 分享一次之后再次分享不调接口，这样容易生成重复得分享文章
			// 	if (this.shareDataId) {
			// 		this.appShareData(this.shareDataId, 'shareHotArticle', 1);
			// 	} else {
			// 		hotQuote({ id: this.detail.id, type: this.detail.type }).then((res) => {
			// 			if (res.data) {
			// 				this.shareDataId = res.data;
			// 				this.appShareData(res.data, 'shareHotArticle', 1);
			// 			}
			// 		});
			// 	}
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	line-height: 1.6;
	overflow: hidden;
}
// *{box-sizing: border-box;}
.bg-fff {
	background-color: #fff;
}
.original {
	color: #98c1e5;
}
.article {
	width: 750rpx;
	overflow: hidden;
}
.action-text {
}
.btm-btn {
	width: 100%;
	.btn-txt {
		padding: 10rpx 60rpx;
		border-radius: 30rpx;
		background: linear-gradient(
			180deg,
			var(--rampButtonBackStartColor) 0%,
			var(--rampButtonBackEndColor) 100%
		);
		color: var(--contentBgImageTitleColor);
	}
}
.action-btn {
	width: 56rpx;
	height: 56rpx;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	color: #fff;
}
::v-deep .u-tabbar__content {
	background-color: #fff;
	border: none;
	.u-tabbar__content__item-wrapper {
		height: 120rpx;
	}
}
::v-deep .content {
	img {
		max-width: 100%;
		height: auto;
	}
}
.userInfo {
	margin: 40rpx;
	// height: 214rpx;
	max-height: 260rpx;
	border-radius: 8rpx;
	background: #fff;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	.bq-tjr {
		position: absolute;
		top: 16rpx;
		right: 0;
		width: 128rpx;
		height: 54rpx;
		background: #f3e2d8;
		border-radius: 128rpx 0rpx 0rpx 128rpx;
		color: #ce763f;
		// right: -10rpx;
		// transform: rotate(45deg);
	}

	.avatar {
		height: 258rpx;
		width: 230rpx;
	}

	.line {
		position: absolute;
		left: 215rpx;
		top: 0;
		width: 40rpx;
		height: 262rpx;
		background-color: #fff;
		transform: rotate(6deg);
		z-index: 1;
	}
	.detail_msg {
		padding: 28rpx;
		height: 100%;
		position: relative;
		z-index: 2;
		.name {
			font-weight: bold;
			line-height: 44rpx;
			color: #111018;
		}
		.user_msg {
			color: #6d6d76;
			line-height: 46rpx;
			max-width: 320rpx;
			.icon_txt {
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
}
.article {
	padding: 20rpx 0 40rpx;

	.title {
		padding: 0 40rpx;
		line-height: 54rpx;
		color: #000;
	}
	/deep/ p {
		margin: 0;
		margin-block-start: 0;
		margin-block-end: 0;
	}
	.info {
		padding: 0 40rpx 20rpx;
		color: #747986;
		margin: 18rpx 0;
		.txt_msg {
			margin-right: 28rpx;
		}
	}
	.line_box {
		height: 1px;
		background: #1e222f;
		margin: 38rpx 0;
	}
	.viewYy {
		padding: 40rpx 40rpx 0;
		color: #747986;
		justify-content: flex-end;
		.yyUser {
			height: 60rpx;
			// background: linear-gradient(91deg, var(--viewBgColor) 4%, rgba(26, 29, 37, 0.05) 99%);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			margin-left: 20rpx;
			padding-left: 10rpx;
			.img_box {
				height: 45rpx;
				width: 45rpx;
				border-radius: 50%;
			}
			.img_more {
				width: 45rpx;
				height: 45rpx;
				background: #e6e8ee;
				border-radius: 50%;
			}
		}
	}
	.detail {
		// padding-top: 40rpx;
		padding: 0 40rpx 0 40rpx;
		text-align: justify;
		min-height: calc(100vh);
		// color: var(--contentFontLightColor);
		// line-height: 44rpx;
	}
	.hotRec {
		height: 24rpx;
		background: #111018;
		margin: 32rpx 0 14rpx 0;
	}
	.hotRecommended {
		padding: 26rpx 40rpx;
		.recommendedTitle {
			font-weight: bold;
			color: #ffffff;
			.recommendedDetail {
				font-weight: 400;
				color: #747986;
				line-height: 72rpx;
			}
		}
	}
	.reminder {
		margin-top: 40rpx;
		color: #747986;
		line-height: 40rpx;
	}
}
</style>
